<template>
  <div class="control">
    <div
      class="horizontal"
      @click="horizontalClick(item)"
      v-for="item in controlList"
      :key="item.id"
      :title="item.describe"
      v-show="item.componentList.includes(name)"
    >
      <svg-icon :style="{ margin: item.line ? '0 0' : '12px 0' }" :icon-class="`control${item.id}`" size="20" />
      <span v-if="item.line" class="line"></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import SvgIcon from "@/components/SvgIcon/index.vue";
import { controlDrawer } from "@/enums/tool";
import useDrawingBoard from "@/store/modules/drawingBoard";
const drawingBoardStore = useDrawingBoard();

interface Props {
  name: string;
}
const props = defineProps<Props>();

const controlList = computed(() => {
  if (props.name === "mapArea") {
    return controlDrawer;
  } else {
    const list: any = [];
    controlDrawer.forEach((item: any) => {
      if (["alignLeft", "alignRight", "alignTop", "alignBottom", "alignAngleY", "alignAngleX"].includes(item.type)) {
        if (drawingBoardStore.nodeSelectedList.length > 1) {
          list.push(item);
        }
      } else {
        list.push(item);
      }
    });
    return list;
  }
});

// 父组件监听事件，同步子组件值的变化给父组件
const emits = defineEmits<{
  horizontal: [_row: any];
}>();
const horizontalClick = (_row: any) => {
  emits("horizontal", _row);
};
</script>
<style scoped lang="scss">
.control {
  width: 41px;
  background-color: #202125;
  border-radius: 6px;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 21px 0;
  .horizontal {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.45s;
    &:hover {
      opacity: 0.5;
    }
    .line {
      background: #08090a;
      width: 22px;
      height: 2px;
      margin: 12px 0;
    }
  }
}
</style>
